<template>
  <article class="skeleton">
    <div class="skeleton__media" />
    <div class="skeleton__body">
      <div class="skeleton__line skeleton__line--title" />
      <div class="skeleton__line" />
      <div class="skeleton__line" />
      <div class="skeleton__footer">
        <div class="skeleton__pill" />
        <div class="skeleton__pill" />
      </div>
    </div>
  </article>
</template>

<style scoped lang="scss">
.skeleton {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-100);
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton__media {
  height: 170px;
  background: linear-gradient(120deg, #f2f4f7 0%, #edeff3 50%, #f2f4f7 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

.skeleton__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton__line {
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(120deg, #f2f4f7 0%, #edeff3 50%, #f2f4f7 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;

  &--title {
    width: 70%;
    height: 18px;
  }
}

.skeleton__footer {
  margin-top: 8px;
  display: flex;
  gap: 10px;
}

.skeleton__pill {
  width: 70px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(120deg, #f2f4f7 0%, #edeff3 50%, #f2f4f7 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(15, 23, 42, 0);
  }
  50% {
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
  }
}
</style>
